<template>
	<view>
		<view class="top">
			<image class="avatar" :src="article.image||defaultAvatar" mode="aspectFill" @click="uploadImage"></image>
			<view class="txt">点击更换头像</view>
		</view>

		<view class="middle">

			<view class="line" @click="inputDialogToggle('昵称',nickname,'nickname')">
				<view class="left">昵称</view>
				<view class="right">{{article.nickname|| empty}}
					<image src="/static/images/右箭头.png" mode="widthFix	"></image>
				</view>
			</view>
			<view class="line" @click="inputDialogToggle('账号',account,'account')">
				<view class="left">账号</view>
				<view class="right">{{ article.account||empty}}
					<image src="/static/images/右箭头.png" mode="widthFix	"></image>
				</view>
			</view>
			<view class="line" @click="inputDialogToggle('昵称',password,'password')">
				<view class="left">密码</view>
				<view class="right">{{article.password||empty}}
					<image src="/static/images/右箭头.png" mode="widthFix	"></image>
				</view>
			</view>

			<uni-calendar ref="calendar" :insert="false" @confirm="confirm" />
			<view class="line" @click="open()">
				<view class="left">生日</view>
				<view class="right">{{article.birthday|| empty}}
					<image src="/static/images/右箭头.png" mode="widthFix	"></image>
				</view>
			</view>

		</view>

		<view>
			<!-- 输入框示例 -->
			<uni-popup ref="inputDialog" type="dialog">
				<uni-popup-dialog ref="inputClose" mode="input" :title="'请输入'+this.title" :value="this.val" placeholder="请输入"
					@confirm="dialogInputConfirm"></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import store from '@/store/index.js'
	import {
		mapState,
		mapMutations,
		mapActions,
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				article: {},
				box: {
					txt: '',
					key: '',
				},
				empty: "未设置",
				defaultAvatar: '/static/images/defaultAvatar.png'
			}
		},
		methods: {
			...mapMutations('admin', ['changeImage', 'changeSingle', 'updata', 'getMessage']),
			onLoad: function(option) {
				//option为object类型，会序列化上个页面传递的参数
				console.log("参数：" + option.id); //打印出上个页面传递的参数。
				this.article = this.users.find((item) => {
					return item.userId == option.id
				});
			},
			// 打开输入框更改其他属性
			inputDialogToggle(txt, key) {
				this.box.txt = txt
				this.box.key = key
				this.$refs.inputDialog.open()
			},
			// 点击确定输入框更改其他属性
			dialogInputConfirm(value) {
				// Vue.set(this.article, obj.pro, obj.value);
				this.article[this.box.key] = value
				console.log(JSON.stringify(this.article))
				this.updata(this.article)
				this.$refs.inputDialog.close()
			},

			// 更改头像
			uploadImage(e) {
				this.changeImage(this.article)
			},

			//更改生日
			open() {
				this.$refs.calendar.open();
			},
			confirm(e) {
				this.changeSingle({
					pro: "birthday",
					value: e.fulldate
				})
				// console.log(e)
				this.updata()
			}
		},
		computed: {
			...mapState('admin', ['users']),
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}

	.top {
		width: 100%;
		height: 300rpx;
		// background-color: beige;
		display: flex;
		flex-direction: column;
		align-content: center;
		justify-content: center;
		align-items: center;

		.avatar {
			width: 200rpx;
			height: 200rpx;
			border-radius: 50%;
		}
	}

	.middle {
		width: 100vw;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.line {
			width: 90vw;
			height: 100rpx;
			// background-color: skyblue;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #dfdfdf;
			font-size: 38rpx;

			.right {
				// background-color: rosybrown;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;

				image {
					width: 1rem;
					height: 1rem;

				}
			}
		}
	}
</style>